<template>
	<main class="main_movie">
		<ul class="nav_ul">
			<li @click="handleCityClick">
				<i>{{ city.name }}</i>
				<span class="iconfont">&#xe6bc;</span>
			</li>
			<li>
				<router-link tag="span" to="/home/movies/intheaters" active-class="active_movie">热映</router-link>
				<router-link tag="span" to="/home/movies/comingsoon" active-class="active_movie">待映</router-link>
			</li>
			<li>
				<span class="iconfont">&#xe60d;</span>
			</li>
		</ul>
		<div class="move_main">
			<van-skeleton title avatar :row="3" :loading="showSkeleton" avatar-shape="square" avatar-size="60px" animate style="margin-top: 5px" v-for="i in 7" :key="i">
				<!-- <movieList :movieList="movieList"></movieList> -->
				<!-- <router-view :movieList="movieList"></router-view> -->
			</van-skeleton>
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
					<router-view :movieList="movieList"></router-view>
				</van-list>
			</van-pull-refresh>
		</div>
	</main>
</template>

<script>
// import movieList from "@/components/MovieList.vue";
import Vue from 'vue'
import { List, PullRefresh, Skeleton } from 'vant'
import { mapState } from 'vuex'
Vue.use(List).use(PullRefresh).use(Skeleton)
export default {
	components: {
		// movieList,
	},
	data() {
		return {
			movieList: [],
			refreshing: false,
			loading: false,
			finished: false,
			showSkeleton: true,
			url: '/mmdb/movie/v2/list/hot.json',
			ct: '北京',
			ci: '1'
		}
	},

	created() {
		this.hasMore = false
		this.limit = 10
		this.offset = 0
	},

	async mounted() {
		await this.loadData()
		console.log(9999999999)
		this.showSkeleton = false
	},
	methods: {
		handleCityClick() {
			console.log('跳转路由！')
			this.$router.push('/citypicker')
		},
		//192.168.25.34:8080/home/movies/intheaters
		// 192.168.25.34:8080/home/movies/intheaters
		async loadData() {
			// await new Promise((resolve, reject) => {
			// 	setTimeout(() => {
			// 		resolve()
			// 	}, 1000)
			// })
			this.showSkeleton = true
			console.log('我等待了定时器吗')
			let { data: res } = await this.$http.get(this.url, {
				params: {
					limit: this.limit,
					offset: this.offset,
					ct: this.city.name,
					ci: this.city.id
				}
			})

			console.log('从新加载了数据啊')
			let { paging, hot, coming } = res.data
			this.movieList = [...this.movieList, ...hot, ...coming]
			this.hasMore = paging.hasMore
			this.showSkeleton = false
		},
		async onLoad() {
			if (this.refreshing) {
				this.movieList = []
				this.refreshing = false
			}
			await this.loadData()
			this.loading = false
			if (!this.hasMore) {
				this.finished = true
			}
			this.offset = this.offset + this.limit
		},
		onRefresh() {
			this.offset = 0
			// 清空列表数据
			this.finished = false

			// 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态
			this.loading = true
			this.onLoad()
		}
	},
	watch: {
		$route: {
			handler(to, from) {
				// ...
				if (to.name === 'intheaters') {
					this.url = '/mmdb/movie/v2/list/hot.json'
				} else {
					this.url = '/mmdb/movie/v1/list/wish/order/coming.json'
				}
				this.refreshing = true
				this.onRefresh()
			},
			deep: true,
			// 页面加载立即执行一次
			immediate: true
		}
	},
	computed: {
		...mapState(['city'])
	}
}
</script>

<style scoped>
.main_movie {
	flex: 1;
	display: flex;
	flex-direction: column;
	/* overflow: scroll; */
}

.main_movie .move_main {
	flex: 1;
	overflow-y: scroll;
}

@font-face {
	font-family: 'iconfont';
	src: url('~@/assets/nav/iconfont.woff2?t=1622546632932') format('woff2'), url('~@/assets/nav/iconfont.woff?t=1622546632932') format('woff'),
		url('~@/assets/nav/iconfont.ttf?t=1622546632932') format('truetype');
}
.iconfont {
	font-family: 'iconfont' !important;
	font-size: 0.22rem;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.main_movie .nav_ul {
	display: flex;
	border-bottom: 2px solid #ccc;
	height: 0.44rem;
}
.main_movie .nav_ul li {
	line-height: 0.44rem;
	text-align: center;
}
.nav_ul li:nth-child(1) {
	width: 0.45rem;
	border-right: 2px solid #ccc;
	position: relative;
}
.nav_ul li:nth-child(1) i {
	font-size: 0.11rem;
	color: #666;
}
.nav_ul li:nth-child(1) span {
	position: absolute;
	right: -3px;
	color: #666;
}
.nav_ul li:nth-child(2) {
	flex: 1;
	display: flex;
	justify-content: space-evenly;
}
.nav_ul li:nth-child(2) span {
	/* flex: 1; */
	width: 0.44rem;
	font-size: 0.13rem;
}
.nav_ul li:nth-child(3) {
	width: 0.45rem;
	border-left: 2px solid #ccc;
}
.active_movie {
	color: #cd4c42;
	padding: 0 0.07rem;
	border-bottom: 2px solid #cd4c42;
}
</style>
